<?php

/* @var $this yii\web\View */

/* @var $csrf_token string */

use yii\helpers\Url;
use app\assets\EchartsAsset;

EchartsAsset::register($this);

$this->title = '小冯后台主页';
?>
<div id="app">
</div>
<? $this->beginBlock('otherJs') ?>
<?= $this->render('/jstemplate/validate') ?>
<?= $this->render('/jstemplate/left_drawer') ?>
<?= $this->render('/jstemplate/notify') ?>
<script type="text/x-template" id="app-template">
    <v-app>
        <notify></notify>
        <left-drawer ref="left_drawer"></left-drawer>
        <v-main>
            <v-app-bar
                elevation="0"
                color="primary"
                dark
                app
            >
                <v-toolbar-title>小冯后台</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-app-bar-nav-icon @click="openDrawer"></v-app-bar-nav-icon>
                <template v-slot:extension>
                    <v-btn-toggle
                        v-model="showType"
                        dense
                        background-color="primary"
                        dark
                    >
                        <v-btn text>
                            年
                        </v-btn>
                        <v-btn text>
                            月
                        </v-btn>
                        <v-btn text>
                            日
                        </v-btn>
                    </v-btn-toggle>
                </template>

            </v-app-bar>
            <v-container class="mt-16">
                <v-row>
                    <v-col cols="12" md="6" lg="6" v-if="orderInfo">
                        <v-card class="mb-2">
                            <v-sheet
                                id="orderInfoSheet"
                                class="v-sheet--offset mx-auto"
                                elevation="12"
                                max-width="calc(100% - 32px)"
                                style="height:300px;"
                            >
                            </v-sheet>
                            <v-card-text>
                                <div class="d-flex">
                                    <div>
                                        <div class="text-h6 mb-2">{{ orderInfo.newCount }}</div>
                                        <div class="text-subtitle-1">新订单</div>
                                    </div>
                                    <v-spacer></v-spacer>
                                    <div>
                                        <div class="text-h6 mb-2">{{ orderInfo.lastCount }}</div>
                                        <div class="text-subtitle-1">本{{ showTypelabel }}订单</div>
                                    </div>
                                </div>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn text href="<?=Url::to(['sale_rcd_other/index'])?>" color="primary">查看更多</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="6" lg="6" v-if="orderSumInfo">
                        <v-card class="mb-2">
                            <v-sheet
                                id="orderSumInfoSheet"
                                class="v-sheet--offset mx-auto"
                                elevation="12"
                                max-width="calc(100% - 32px)"
                                style="height:300px;"
                            >
                            </v-sheet>
                            <v-card-text>
                                <div class="d-flex">
                                    <div>
                                        <div class="text-h6 mb-2">{{ orderSumInfo.lastCount }}</div>
                                        <div class="text-subtitle-1">本{{ showTypelabel }}销售金额</div>
                                    </div>
                                </div>
                            </v-card-text>
                            <v-card-actions>
                                <v-btn text href="<?=Url::to(['sale_rcd_other/index'])?>" color="primary">查看更多</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="6" lg="6" v-if="userInfo">
                        <v-card class="mb-2">
                            <v-sheet
                                id="userInfoSheet"
                                class="v-sheet--offset mx-auto"
                                elevation="12"
                                max-width="calc(100% - 32px)"
                                style="height:300px;"
                            >
                            </v-sheet>
                            <v-card-text>
                                <div class="d-flex">
                                    <div>
                                        <div class="text-h6 mb-2">{{ userInfo.lastCount }}</div>
                                        <div class="text-subtitle-1">本{{ showTypelabel }}新增用户</div>
                                    </div>
                                </div>
                            </v-card-text>
                            <v-card-actions>

                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="6" lg="6" v-if="supplierInfo">
                        <v-card class="mb-2">
                            <v-sheet
                                id="supplierInfoSheet"
                                class="v-sheet--offset mx-auto"
                                elevation="12"
                                max-width="calc(100% - 32px)"
                                style="height:300px;"
                            >
                            </v-sheet>
                            <v-card-text>
                                <div class="d-flex">
                                    <div>
                                        <div class="text-h6 mb-2">{{ supplierInfo.lastCount }}</div>
                                        <div class="text-subtitle-1">本{{ showTypelabel }}新增同行</div>
                                    </div>
                                </div>
                            </v-card-text>
                            <v-card-actions>

                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="12" lg="12" v-if="supplierExtendsInfo">
                        <v-card class="mb-2">
                            <v-container
                                id="supplierExtendsSheet"
                                style="height:300px;"
                            >
                            </v-container>
                            <v-card-actions>

                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="12" lg="12" v-if="supplierSalesInfo">
                        <v-card class="mb-2">
                            <v-container
                                id="supplierSalesSheet"
                                style="height:300px;"
                            >
                            </v-container>
                            <v-card-actions>

                            </v-card-actions>
                        </v-card>
                    </v-col>
                    <v-col cols="12" md="12" lg="12" v-if="productSalesInfo">
                        <v-card class="mb-2">
                            <v-container
                                id="productSalesSheet"
                                style="height:300px;"
                            >
                            </v-container>
                            <v-card-actions>

                            </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>

            <v-footer
                dark
                padless
                app
            >
                <v-card
                    class="flex"
                    flat
                    tile
                >
                    <v-card-text class="py-2 white--text text-center">
                        {{ new Date().getFullYear() }} — <strong>欢迎使用当地人分销后台</strong>
                    </v-card-text>
                </v-card>
            </v-footer>
        </v-main>
    </v-app>
</script>
<script>
    new Vue({
        el: '#app',
        vuetify: vuetify,
        data: {
            showType: 2,
            orderInfo: null,
            userInfo: null,
            supplierInfo: null,
            orderSumInfo: null,
            supplierExtendsInfo: null,
            supplierSalesInfo: null,
            productSalesInfo: null,
        },
        mounted: function () {
            this.getDataFromApi()
        },
        watch: {
            showType: {
                handler() {
                    this.getDataFromApi()
                },
                deep: true,
            },
        },
        computed: {
            showTypelabel: function () {
                return this.showTypeLabelFunc()
            }
        },
        methods: {
            getDataFromApi() {
                let vue = this;

                http.get("index/index", {
                    params: {
                        show_type: vue.showType
                    }
                }).then(function (response) {
                    let data = response.data;
                    vue.orderInfo = data.orderInfo;
                    vue.userInfo = data.userInfo;
                    vue.supplierInfo = data.supplierInfo;
                    vue.orderSumInfo = data.orderSumInfo;
                    vue.supplierExtendsInfo = data.supplierExtendsInfo;
                    vue.supplierSalesInfo = data.supplierSalesInfo;
                    vue.productSalesInfo = data.productSalesInfo;
                    vue.$nextTick(() => {
                        vue.buildSevenDayLines('orderInfoSheet', vue.orderInfo, '七' + vue.showTypeLabelFunc() + '订单量', '订单量', '日期', '#191D32')
                        vue.buildSevenDayLines('orderSumInfoSheet', vue.orderSumInfo, '七' + vue.showTypeLabelFunc() + '销售额', '销售额', '日期', '#282F44')
                        vue.buildSevenDayLines('userInfoSheet', vue.userInfo, '七' + vue.showTypeLabelFunc() + '用户量', '用户量', '日期', '#453A49')
                        vue.buildSevenDayLines('supplierInfoSheet', vue.supplierInfo, '七' + vue.showTypeLabelFunc() + '同行量', '同行量', '日期', '#6D3B47')
                        vue.buildSupplierExtendLines()
                        vue.buildSupplierSalesLines()
                        vue.buildProductSalesLines()
                    })
                })
            },
            showTypeLabelFunc() {
                switch (this.showType) {
                    case 0:
                        return '年';
                    case 1:
                        return '月';
                    case 2:
                        return '日';
                }
            },
            openDrawer() {
                this.$refs.left_drawer.toggleLeftDrawerVisible()
            },
            buildSevenDayLines(key, info, title, xLabel, yLabel, backgroundColor) {
                let option = {
                        title: {
                            text: title,
                            x: 'left',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        textStyle: {
                            color: 'white'
                        },
                        darkMode: true,
                        backgroundColor: backgroundColor,
                        dataset: {
                            source: info.sevenCounts
                        },
                        grid: {containLabel: true},
                        xAxis: {type: 'category', name: xLabel},
                        yAxis: {name: yLabel},
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                val = params[0].value;
                                return [
                                    val.label + '<br/>',
                                    val.count + '<br/>'
                                ].join('');
                            }
                        },
                        series: [
                            {
                                name: yLabel,
                                type: 'line',
                                lineStyle: {
                                    color: 'white'
                                },
                                label: {
                                    normal: {
                                        formatter: "{@count}",
                                        show: true,
                                        position: 'right',
                                        color: 'white'
                                    }
                                },
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'label',
                                    // Map the "product" column to Y axis
                                    y: 'value',
                                },
                            }
                        ]
                    }
                ;

                let chart = echarts.init(document.getElementById(key))
                chart.setOption(option)
            },
            buildSupplierExtendLines() {
                let option = {
                        title: {
                            text: '同行开发top10',
                            x: 'left'
                        },
                        dataset: {
                            source: this.supplierExtendsInfo
                        },
                        grid: {containLabel: true},
                        xAxis: {type: 'category', name: '同行'},
                        yAxis: {name: '开发数量'},
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                val = params[0].value;
                                return [
                                    val.nickname + '<br/>',
                                    val.city_count + '<br/>'
                                ].join('');
                            }
                        },
                        series: [
                            {
                                name: '开发数量',
                                type: 'bar',
                                label: {
                                    normal: {
                                        formatter: "{@city_count}",
                                        show: true,
                                        position: 'right'
                                    }
                                },
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'nickname',
                                    // Map the "product" column to Y axis
                                    y: 'city_count',
                                },
                            }
                        ]
                    }
                ;

                let chart = echarts.init(document.getElementById('supplierExtendsSheet'))
                chart.setOption(option)
            },
            buildSupplierSalesLines() {
                let option = {
                        title: {
                            text: '同行销售top10',
                            x: 'left'
                        },
                        dataset: {
                            source: this.supplierSalesInfo
                        },
                        grid: {containLabel: true},
                        xAxis: {type: 'category', name: '同行'},
                        yAxis: {name: '销售量'},
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                val = params[0].value;
                                return [
                                    val.nickname + '<br/>',
                                    val.city_count + '<br/>'
                                ].join('');
                            }
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'bar',
                                label: {
                                    normal: {
                                        formatter: "{@city_count}",
                                        show: true,
                                        position: 'right'
                                    }
                                },
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: 'nickname',
                                    // Map the "product" column to Y axis
                                    y: 'city_count',
                                },
                            }
                        ]
                    }
                ;

                let chart = echarts.init(document.getElementById('supplierSalesSheet'))
                chart.setOption(option)
            },
            buildProductSalesLines() {
                let option = {
                        title: {
                            text: '产品销售占比',
                            x: 'left'
                        },
                        dataset: {
                            source: this.productSalesInfo
                        },
                        grid: {containLabel: true},
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                val = params[0].value;
                                return [
                                    val.label + '<br/>',
                                    val.count + '<br/>'
                                ].join('');
                            }
                        },
                        series: [
                            {
                                name: '销售量',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                label: {
                                    normal: {
                                        formatter: '{@label} ({@count}个) ',
                                        show: true,
                                    }
                                },
                                encode: {
                                    // Map the "amount" column to X axis.
                                    name: 'label',
                                    // Map the "product" column to Y axis
                                    value: 'count',
                                },
                            }
                        ]
                    }
                ;

                let chart = echarts.init(document.getElementById('productSalesSheet'))
                chart.setOption(option)
            }
        },
        template: '#app-template'
    })
</script>
<? $this->endBlock(); ?>
